<template>
  <div class="container">
    <Category title="美食" :listData="foods">
      <img slot="center"
        src="https://img1.baidu.com/it/u=2427807151,1119128409&fm=253&fmt=auto&app=138&f=JPEG?w=781&h=500" alt="">
      <a slot="footer" href="http://www.baidu.com">Baidu</a>
    </Category>
    <Category title="游戏">
      <ul slot="center">
        <li v-for="(item, index) in games" :key="index">{{ item }}</li>
      </ul>
      <div class="foot" slot="footer">
        <a href="http://www.g.com">单机游戏</a>
        <a href="http://www.g.com">网络游戏</a>
      </div>
    </Category>
    <Category title="电影">
      <img slot="center" src="https://img1.baidu.com/it/u=199537290,3949354095&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"
        alt="" srcset="">
      <!-- <template slot="footer"> -->
      <!-- vue 2.6新的slot语法 ，v-slot 仅使用在template -->
      <template v-slot:footer>
        <div class="foot">
          <a href="http://www.taobao.com">经典</a>
          <a href="http://www.taobao.com">热门</a>
          <a href="http://www.taobao.com">推荐</a>
        </div>
        <h4>欢迎前来观影</h4>
      </template>

      <!-- <video controls src=""></video> -->
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category.vue"
export default {
  name: "App",
  data() {
    return {
      foods: ['火锅', '烧烤', '小龙虾', '牛排'],
      games: ['红色', 'cs', '超级码丽', '魔兽'],
      films: ['教父', '拆弹专家', '救赎', '异形'],
    }
  },
  components: {
    Category,
  }
};
</script>


<style scoped>
.container,
.foot {
  display: flex;
  justify-content: space-around;
}

h4 {
  text-align: center;
}
</style>